<div class="container">
  <div class="my-4">
    <mat-card class="card-width">
      <label>Welcome! This demo analyzes an audio file to allow a user to gain insights about
        the content in the file. It uses the Perspective API to identify whether a comment may be
        considered "toxic", such as if it is hateful, racist, or explicit. It also uses the Natural
        Language API to understand the overall opinion/attitude expressed in a block of text as well
        as extracts entities within the transcript, such as dates, people, or organizations.</label>
    </mat-card>
  </div>

  <div *ngIf="!isLoading">
    <div *ngIf="dataSource?.data?.length > 0; else noFiles" class="mat-elevation-z8 mt-4">
      <table mat-table [dataSource]="dataSource" class="table-width">
        <ng-container matColumnDef="fileName">
          <th mat-header-cell *matHeaderCellDef>File Name</th>
          <td mat-cell *matCellDef="let file"> {{ file.name }} </td>
        </ng-container>
        <ng-container matColumnDef="fileType">
          <th mat-header-cell *matHeaderCellDef>Type</th>
          <td mat-cell *matCellDef="let file"> {{ file.type }}</td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row [ngClass]="{'selected-row': this.getSelectedRow()==row}"
            *matRowDef="let row; columns: displayedColumns;" (click)="selectFileToAnalyze(row)"></tr>
      </table>
      <mat-paginator [pageSizeOptions]="[10, 25, 50]"></mat-paginator>
    </div>
  </div>
  <div class="row justify-content-end my-4">
    <div class="col-auto icon-height">
      <label>{{ getFileName() }}</label>
    </div>
    <div class="col-auto icon-height">
      <div *ngIf="isLoading">
        <mat-spinner [diameter]="30"></mat-spinner>
      </div>
    </div>
  </div>

  <ng-template #noFiles>
    <div class="container extend-height">
      <div class="row justify-content-center">
        <p class="my-2">No audio files have been processed yet.</p>
      </div>
    </div>
  </ng-template>

</div>
